<template>
  <!-- 设置成功 -->
  <div>
    <div class="pwd-tip">设置成功，{{time}} 秒后跳转登陆页面</div>
    <div class="next-btn" @click="reLogin">返回登录页面</div>
  </div>
</template>

<script>
export default {
  name: 'PwdSuccess',
  data() {
    return {
      timer: null, // 定时器名称
      time: 5
    }
  },
  mounted() {
    // 修改页面进度条样式
    this.$bus.$emit('changeStep', 'three')
    // 定时器
    const that = this
    this.timer = setInterval(() => {
      if (that.time == 0) {
        that.timer && clearInterval(that.timer)
        that.timer = null
        that.$router.push('/login')
      }
      else {
        that.time -= 1
      }
    }, 1000)
  },
  methods: {
    // 提前返回登陆页面
    reLogin() {
      this.timer && clearInterval(this.timer)
        this.timer = null
        this.$router.replace('/login')
    }
  },
  //最后在beforeDestroy()生命周期内清除定时器：
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    this.timer = null
  },
}
</script>

<style lang='less' scoped>
  .pwd-tip {
    margin: 16px 0;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    color: #333;
  }

  .next-btn {
      width: 218px;
      display: block;
      margin: 15px auto;
      margin-top: 0;
      border-radius: 6px;
      background-color: #0047ae;
      color: #fff;
      font-weight: bold;
      line-height: 39px;
      text-align: center;
      cursor: pointer;
      text-decoration: none;
    }
</style>